<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="../../js/mui.min.js"></script>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <style type="text/css">
    	.offset-menu-title {
			color: #fff;
			line-height: 40px;
			font-size: 18px;
			font-weight: normal;
			text-indent: 15px;
		}
		#offset-menu-list .mui-table-view-cell{
			padding-left: 15px;
			background-color: #333;
			color: #fff;
		}
		#offset-menu-list .mui-table-view-cell.active-item, #offset-menu-list .mui-table-view-cell:active {
			background-color: #ccc;
			color: #333;
		}
		
    	#header {
    		background-color: #498AF7;
    		z-index: 99999999;
    	}
    	#header a, #header h1 {
    		color: #fff;
    	}
    	.mui-content>div>div {
    		background-color: #fff;
    	}
    	.mui-content>div>div:not(:first-child) {
    		margin-top: 10px;
    	}
    	.mui-content h2 {
    		font-size: 18px;
    		font-weight: normal;
    		margin: 0;
    		line-height: 50px;
    		padding-left: 10px;
    	}
    	#line-charts {
    		height: 250px;
    	}
    	
    	#bar-charts {
    		height: 250px;
    	}
    	
    	#pie-charts {
    		height: 250px;
    	}
    </style>
</head>
<body>
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
		<!--侧滑菜单部分-->
		<aside id="offCanvasSide" class="mui-off-canvas-right">
			<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
				<div class="mui-scroll" id="offset-menu-list">
					<h2 class="offset-menu-title">医院科室列表</h2>
				</div>
			</div>
		</aside>
		<div class="mui-inner-wrap">
			<header class="mui-bar mui-bar-nav" id="header">
			    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			    <h1 class="mui-title">故障统计</h1>
			    <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
			</header>
			<div class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="line-charts-container">
						<h2>工单数量</h2>
						<div><canvas id="myMingxiChart" width="380" height="200"></canvas></div>
					</div>
				    <div class="bar-charts-container">
				    	<h2>设备状况</h2>
						<div><canvas id="myEquipStat" width="380" height="200"></canvas></div>
				    </div>
				    <div class="line-charts-container">
				    	<h2>设备统计</h2>
						<div><canvas id="myEquipCuvStat" width="380" height="200"></canvas></div>
				    </div>
				    <div class="line-charts-container">
				    	<h2>状态统计</h2>
						<div><canvas id="myEquipPieStat" width="380" height="200"></canvas></div>
				    </div>
				</div>
			</div>
			
			
			
			
			
			<!-- off-canvas backdrop -->
			<div class="mui-off-canvas-backdrop"></div>
		</div>
	</div>
	
	
	<script type="text/javascript" charset="utf-8">
      	mui.init();
      	mui('.mui-scroll-wrapper').scroll();
    </script>
    <script type="text/javascript" src="../../js/Chart.js"></script>
    <script type="text/javascript" src="../../js/statistics.js"></script>
</body>
</html>